<template>
    <div class="conter">
        <div class="header">
            <div class="title">
                <h1>程序员之路</h1>
                <!-- 1.绑定点击事件 -->
                <span class="btn" @click="btn">
                    <!-- 4. 根据isShow的值显示不同文字 -->
                    {{ isShow ? '收起' : '展开' }}
                </span>
            </div>
            <!-- 2. v-show配合变量来控制标签隐藏出现 -->
            <div class="container" v-show="isShow">
                <p>少时狂把编程想,</p>
                <p>无畏赴身IT行。</p>
                <p>纵使荣华未可近，</p>
                <p>我自coding又何妨！</p>
            </div>
        </div>

    </div>

</template>
<script>
export default {
  data() {
        return {
            isShow: true,

    };
    },
    methods: {
        btn() { 
            console.log("点击了");
            this.isShow = !this.isShow; 
            
        }
    }
};


</script>
<style scoped>
.conter{
    width: 60%;
    height: 800px;
    border-radius: 1em;
    margin: 10em auto;
    background-color: #afcee4;
}
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0 1em;
}
.header{
    border: solid 1px #dad5d5;
}
.container{
    width: 100%;
    padding: 0 20em;
    font-size: 18px;
}
.btn{
    /* 鼠标变小手 */
    cursor: pointer;
}
</style>